<template>
  <div class="container">
    <div class="wrapper">
      <el-tabs :tab-position="tabPosition" style="height: 200px">
        <el-tab-pane label="个人资料">
          <div class="item">
            <h3>个人资料</h3>
            <div class="demo-image__preview">
              <el-image
                style="
                  width: 100px;
                  height: 100px;
                  border-radius: 50%;
                  position: relative;
                  z-index: 2;
                "
                :src="url"
                :preview-src-list="srcList"
              >
              </el-image>
              <div class="model">
                <i class="el-icon-camera"></i>
              </div>
            </div>

            <!-- <div class="tip">更换头像</div> -->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->

              <i class="el-icon-plus avatar-uploader-icon">更换头像</i>
            </el-upload>

            <div class="showmsg">
              <div class="show-item">
                <span><i class="el-icon-user-solid"></i>昵称</span>
                <span>{{ personForm.pname }}</span>
              </div>
              <div class="show-item">
                <span><i class="el-icon-phone"></i>手机号码</span>
                <span>{{ personForm.phonenum }}</span>
              </div>
              <div class="show-item">
                <span><i class="el-icon-s-flag"></i>所属部门</span>
                <span>{{ personForm.section }}</span>
              </div>
              <div class="show-item">
                <span><i class="el-icon-s-promotion"></i>邮箱地址</span>
                <span>{{ personForm.email }}</span>
              </div>
              <div class="show-item">
                <span><i class="el-icon-watch"></i>创建时间</span>
                <span>2021-1-14</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="基本资料">
          <div class="item">
            <h3>基本资料</h3>
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm2"
              label-width="100px"
              class="demo-ruleForm"
              label-position="left"
            >
              <el-form-item label="昵称" prop="pname">
                <el-input v-model="ruleForm.pname"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phonenum">
                <el-input v-model="ruleForm.phonenum"></el-input>
              </el-form-item>
              <el-form-item label="邮箱地址" prop="email">
                <el-input v-model="ruleForm.email"></el-input>
              </el-form-item>
              <el-form-item label="所属部门" prop="section">
                <el-input v-model="ruleForm.section"></el-input>
              </el-form-item>

              <el-form-item style="margin-left: -78px">
                <el-button type="primary" @click="submitForm('ruleForm2')"
                  >保存</el-button
                >
                <el-button @click="resetForm('ruleForm2')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="注册账号">
          <div class="item">
            <h3>注册账号</h3>
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              label-position="left"
            >
              <el-form-item label="用户名" prop="age">
                <el-input v-model="ruleForm.rname"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input
                  type="password"
                  v-model="ruleForm.checkPass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item style="margin-left: -78px">
                <el-button type="primary" @click="register('ruleForm')"
                  >保存</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    //昵称
    var checkPname = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入昵称"));
      } else {
        callback();
      }
    };
    //手机号
    var checkPhone = (rule, value, callback) => {
      let reg = /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!reg.test(value)) {
        callback(new Error("手机号码有误，请重填"));
      } else {
        callback();
      }
    };
    //邮箱地址
    var checkEmail = (rule, value, callback) => {
      let reg = /^[A-Za-z0-9]+([_\\.][A-Za-z0-9]+)*@([A-Za-z0-9\\-]+\.)+[A-Za-z]{2,6}$/;
      if (value === "") {
        callback(new Error("请输入邮箱地址"));
      } else if (!reg.test(value)) {
        callback(new Error("邮箱地址有误，请重填"));
      } else {
        callback();
      }
    };
    //所属部门
    var checkSection = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入部门"));
      } else {
        callback();
      }
    };
    //用户名
    var checkAge = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };

    //新密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    //确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      tabPosition: "top",
      url:
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2042867885,3348151267&fm=26&gp=0.jpg",
      srcList: [
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2042867885,3348151267&fm=26&gp=0.jpg",
      ],
      imageUrl: "",
      personForm: {
        //手机号
        phonenum: 18428018590,
        //昵称
        pname: "",
        //邮箱地址
        email: "499148698@qq.com",
        //所属部门
        section: "研发部",
        pass: "",
      },
      ruleForm: {
        //手机号
        phonenum: "",
        //昵称
        pname: "",
        //邮箱地址
        email: "",
        //所属部门
        section: "",

        pass: "",
        checkPass: "",
        rname: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],

        pname: [{ validator: checkPname, trigger: "blur" }],
        phonenum: [{ validator: checkPhone, trigger: "blur" }],
        email: [{ validator: checkEmail, trigger: "blur" }],
        section: [{ validator: checkSection, trigger: "blur" }],
      },
    };
  },
  methods: {
    //修改个人信息
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("是否保存修改信息", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.personForm.phonenum = this.ruleForm.phonenum;
              this.personForm.pname = this.ruleForm.pname;
              this.personForm.email = this.ruleForm.email;
              this.personForm.section = this.ruleForm.section;
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "操作取消",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.myaxios.post("http://housekeepi.com/api/admin/register", {
            token: localStorage.getItem("loginmsg"),
            name: this.ruleForm.rname,
            pw: this.ruleForm.pass,
          });
          this.$alert("注册成功！", "注册账号", {
            confirmButtonText: "确定",
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //上传头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if (this.imageUrl) {
        this.url = this.imageUrl;
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  mounted() {
    this.personForm.pname = localStorage.getItem("username");
  },
};
</script>

<style scoped>
.model {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: rgb(0, 0, 0);
  justify-content: center;
  align-items: center;
  z-index: 1;
  display: none;
}
.model .el-icon-camera {
  font-size: 30px;
  color: #ccc;
}
.demo-image__preview {
  position: relative;
  width: 100px;
  margin: 0 auto;
}
.demo-image__preview:hover .model {
  display: flex;
}
.wrapper {
  padding-left: 10px;
  width: 400px;
}
.wrapper .item {
  text-align: center;
  border: 1px solid #ccc;
  margin-top: -2px;
}
.item {
  box-sizing: border-box;
  padding: 0 30px;
}
.item h3 {
  margin: 10px 0;
  color: #666;
  position: relative;
}
.item h3::after {
  position: absolute;
  content: "";
  height: 1px;
  width: 100px;
  right: 0;
  bottom: 10px;
  background: #666;
}
.item h3::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 100px;
  left: 0;
  bottom: 10px;
  background: #666;
}
.item .tip {
  font-size: 13px;
}
.item .tip:hover {
  cursor: pointer;
  color: #487eb0;
}
.showmsg {
  width: 85%;
  margin: 0 auto;
  padding-bottom: 80px;
}
.showmsg .show-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  color: #718093;
  margin-bottom: 10px;
}
.avatar-uploader-icon {
  margin-left: -7px;
  font-weight: bold;
  font-size: 13px;
  color: #8c939d;
  height: 10px;
  text-align: center;
  position: relative;
}
.avatar-uploader-icon:hover {
  color: #487eb0;
}
.avatar-uploader-icon::before {
  position: absolute;
  right: -13px;
}
</style>